<template>
<div>
  <div class="table-data">
    <div class="search-box">
      <el-input size="small" v-model="searchMap.keyword" placeholder="商品名称"></el-input>
      <el-select v-model="searchMap.shop_id" clearable placeholder="商家名称">
        <el-option v-for="item in businessList" :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select>
      <el-select v-model="searchMap.status" clearable placeholder="使用状态">
        <el-option label="正常" value="normal"></el-option>
        <el-option label="待核销" value="wait"></el-option>
        <el-option label="待二次核销码" value="wait_second"></el-option>
        <el-option label="已使用" value="used"></el-option>
        <el-option label="已作废" value="cancel"></el-option>
        <el-option label="冻结" value="freeze"></el-option>
      </el-select>
      <el-select v-model="searchMap.expire" clearable placeholder="是否过期">
        <el-option label="已过期" value="1"></el-option>
        <el-option label="未过期" value="0"></el-option>
      </el-select>
      <el-select v-model="searchMap.type" clearable placeholder="码类型">
        <el-option label="自建码" value="create"></el-option>
        <el-option label="导码" value="export"></el-option>
        <el-option label="制码" value="make"></el-option>
      </el-select>
      <el-button size="small" type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
    </div>
    <el-table 
      v-loading="loading"
      element-loading-text="正在加载"
      element-loading-spinner="el-icon-loading" :data="tableData"  style="width:100%" :header-cell-style="headClass"  :height="tHeight" class="table-box">
      <el-table-column label="序号" prop="id" width="120"></el-table-column>
      <el-table-column label="商品名称" width="200">

            <template slot-scope="scope"> 
              <div class="commodity-name">
              <el-popover placement="right" title="" trigger="hover">
              <img :src="scope.row.cover" style="max-width: 300px; max-height: 300px;"/>
              <img slot="reference" class="commodity-image" :src="scope.row.cover" :alt="scope.row.cover">
			   </el-popover>
              <p style="width: 300px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap" >{{scope.row.title}}</p>
              </div>
            </template>
            
        </el-table-column>
      <el-table-column label="绑定商家名称" prop="shop_name" width="120"></el-table-column>

      <el-table-column label="渠道商" prop="merchant_name"></el-table-column>
      <el-table-column label="核销码" prop="code" width="70"></el-table-column>
      <el-table-column label="类型" prop="type_txt" width="60"></el-table-column>
      <el-table-column label="是否导出" prop="" width="80">
        <template slot-scope="scope">
          {{scope.row.exportTicket ? '是' : '否'}}
        </template>
      </el-table-column>
      <el-table-column label="导出对象" width="100">
        <template slot-scope="scope">
          {{scope.row.exportTicket ? scope.row.exportTicket.import_ticket_object : '/'}}
        </template>
      </el-table-column>
      <el-table-column label="使用状态" prop="status_txt" width="80"></el-table-column>
      
      <el-table-column label="作废时间" prop="cancel_time" ></el-table-column>
      <el-table-column label="使用时间" prop="verify_time"></el-table-column>
      <el-table-column label="有效期" prop="createTime" width="190">
        <template slot-scope="scope">
          <p>开始：{{scope.row.verify_start_time}}</p>
          <p>结束：{{scope.row.verify_end_time}}</p>
        </template>
      </el-table-column>
      <el-table-column label="操作人" prop="admin_name" width="100"></el-table-column>
      <el-table-column label="操作" prop="admin_name" width="150">
        <template slot-scope="scope">
          <el-button size="mini" v-if="(scope.row.status=='wait' || scope.row.status=='wait_second') || (scope.row.export_version > 0 && scope.row.status == 'normal')" type="primary" @click="handleWirte(scope.$index,scope.row)">核销</el-button>
          <el-button size="mini" type="danger" @click="handleRefund(scope.$index,scope.row)" v-if="scope.row.status_txt!=='已作废'&& scope.row.status_txt!=='已核销'">销毁</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pages" ref="page-box">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10,30,50]"
        :page-size="size"
        layout="total,sizes,prev,pager,next,jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
    <router-view></router-view>
  </div>
</template>

<script lang="ts">

import { Component, Vue, Provide,Prop,Watch } from "vue-property-decorator";
// import { State, Getter, Mutation, Action } from "vuex-class";
import codeApi from "@/api/code";
import businessApi from "@/api/business";

@Component({
  components: { }
})
export default class codeList extends Vue {
  // @Getter("user") getUser: any;
  @Provide() tHeight: number = document.body.offsetHeight - 323;
  @Provide() tableData: any = []; // 表格数据
  @Provide() multipleTable: any = []; // 表格数据
  @Provide() page: number = 1; // 当前page
  @Provide() size: number = 10; // 请求数据的个数 默认5
  @Provide() total: number = 0; // 总数据条数
  @Provide() advertisers: any = [];
  @Provide() businessList: any=[];//商家列表
  @Provide() loading: Boolean = true; // 是否显示加载图标
  @Provide() searchMapB:{
    keyword: string,
    cate_id: string,
    is_child: any,
  }={
    keyword: "",
    cate_id: "",
    is_child: 0
  }
  @Provide() writeCode: any = {
    id:"",
    num:""
  };
  @Provide() searchMap:{
    keyword: string,
    shop_id:string,
    status:string,
    type:string,
    expire:string
  }={
    keyword:"",
    shop_id:"",
    status:"",
    type:"",
    expire:""
  }
  created() {
    this.loadData();
    // 商家
     businessApi.businessList(1,999999,this.searchMapB)
      .then((res: any) => {
        this.businessList = res.data.data.list;
    });
  }

  loadData() {
    codeApi.codeList(this.page,this.size,this.searchMap)
      .then((res: any) => {
        this.tableData = res.data.data.list;
        this.total = res.data.data.total;
        this.loading=false
      });
  }
  headClass() {
            return "text-align: center;background:#eef1f6;";
        }
  //核销
  handleWirte(i,row){
    this.writeCode.id=row.id
    this.writeCode.num=row.ticket_num
    this.$confirm('是否要核销', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      closeOnClickModal: false
    }).then(() => {
      console.log('确定')
      codeApi.codeWrite(this.writeCode)
      .then((res: any) => {
        if(res.data.status){
          this.$message({
            message: '操作成功',
            type: "success"
          });
          this.loadData();
        }else {
          this.$message({
            message: res.data.msg,
            type: "error"
          });
        }
      });
    }).catch(() => {
      console.log('取消')
      this.$message({
        type: 'info',
        message: '已取消删除'
      });          
    });
  }
  // 销毁
  handleRefund(i,row){
    this.$confirm('是否要销毁', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      closeOnClickModal: false
    }).then(() => {
      codeApi.refundCode(row.id)
      .then((res: any) => {
        if(res.data.status){
          this.$message({
            message: '操作成功',
            type: "success"
          });
          this.loadData();
        }else{
          this.$message({
            message: res.data.msg,
            type: "warning"
          });
        }
      });
    }).catch(() => {
      this.$message({
        type: 'info',
        message: '已取消删除'
      });          
    });
  }
  handleSizeChange(val: number): void {
    this.size = val;
    this.page = 1;
    this.loadData();
  }

  handleCurrentChange(val: number): void {
    this.page = val;
    this.loadData();
  }

  handleSearch(): void {
    // 点击搜索
    this.page = 1;
    this.loadData();
  }
}
</script>

<style lang="scss" scoped>
.el-range-editor.el-input__inner{
  margin-right: 10px
}
.commodity-name{
      display:flex;
      flex-wrap: nowrap;
      padding: 6px;
      .commodity-image{
        width: 50px;
        height:50px;
      }
      p{
        margin:auto 10px;
      }
    }
</style>
